<template>
  <div class="call-center-setting">
    <div class="container">
      <div class="left-menu">
        <div class="menu-title">{{ $t('callcenter.callcenterSetting') }}</div>
        <nav :class="`menu-list ${current == index ? 'menu-checked' : ''}`" v-for="(item,index) in menuList" :key="index" @click="changePage(item.current)">
          <div class="icon-box">
            <i :class="`iconfont ${item.icon} ${current == item.current ? 'font-size-16 font-w-600' : 'font-size-14'}`"></i>
          </div>
          <span>{{item.name}}</span>
        </nav>
      </div>
      <div class="main">
        <template v-if="current == 0">
          <div class="service-line">
            <p><img :src="image1">{{$t('callcenter.callCenter.welcomeText')}}</p>
            <div class="info">
              <div class="info-item">
                <i class="iconfont icon-dianhua1"></i>
                <div class="item-content">
                  <p>{{$t('callcenter.callCenter.label1')}}：</p>
                  <span>{{AccountInfo.hotLine}}</span>
                  <p>{{$t('callcenter.callCenter.label2')}}：</p>
                  <span>{{AccountInfo.displayPhone}}</span>
                </div>
              </div>
              <div class="info-item">
                <i class="iconfont icon-zuoxi"></i>
                <div class="item-content">
                  <p>{{$t('callcenter.callCenter.label3')}}：</p>
                  <div class="align-items-center">
                    <div>{{AccountInfo.agentNum}}</div>
                    <el-tooltip :content="$t('callcenter.callCenter.tooltip')">
                      <i class="iconfont icon-info icon-agent-tip"></i>
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <div class="info-item">
                <i class="iconfont icon-shijian"></i>
                <div class="item-content">
                  <p>{{$t('callcenter.callCenter.label4')}}：</p>
                  <span>{{AccountInfo.endTime}}</span>
                </div>
              </div>
              <div class="info-item">
                <i class="iconfont icon-huafei"></i>
                <div class="item-content">
                  <p>{{$t('callcenter.callCenter.label5')}}：</p>
                  <span class="money">{{AccountInfo.cost}}{{$t('common.base.yuan')}}</span>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-else-if="current == 1">
          <!-- start 表格 -->
          <div class="table-container">
            <!-- <div class="operation-bar-container">
              <form-item label="添加成员">
                <form-user :field="field" v-model="selectUsers" :max="maxNum"/>
              </form-item>
            </div> -->
            <!-- <el-table :data="userList" style="width: 100%" stripe header-row-class-name="callcenter-table-header" ref="usersTable" class="callcenter-table">
              <el-table-column prop="agentName" label="坐席"></el-table-column>
              <el-table-column label="坐席电话">
                <template slot-scope="scope">
                  <el-input v-if="scope.row.verifyStatus == 0" v-model="scope.row.phone" placeholder="请输入坐席电话"></el-input>
                  <span v-else>{{scope.row.phone}}</span>
                </template>
              </el-table-column>
              <el-table-column label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.verifyStatus ==-1" style="color:#FB602C;">{{fmt_user_state(scope.row.verifyStatus)}}</span>  
                  <span v-else-if="scope.row.verifyStatus == 2" style="color:#6ECF40;">{{fmt_user_state(scope.row.verifyStatus)}}</span>  
                  <span v-else style="color:#999999;">{{fmt_user_state(scope.row.verifyStatus)}}</span>  
                </template>
              </el-table-column>
              <el-table-column label="上线">
                <template slot-scope="scope">
                  <el-switch v-if="scope.row.verifyStatus==2" :disabled="scope.row.pending" :value="Boolean(scope.row.status)" @change="statusChange(scope.row)">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button :style="{color:scope.row.verifyStatus!=0 ? '#999999;' : '#55B7B4'}" type="text" :disabled="scope.row.verifyStatus!=0" :loading="pending" @click="submit(scope.row,'present')">提交</el-button>
                  <el-button :style="{color:scope.row.verifyStatus==1 ? '#999999;' : '#FB602C'}" type="text" :disabled="scope.row.verifyStatus==1" :loading="pending" @click="del(scope.row,scope.$index,'present')">删除</el-button>
                </template>
              </el-table-column>
            </el-table> -->
            <el-table
              :data="userList"
              v-loading="fullscreenLoading"
              stripe
              style="width: 100%"
              :highlight-current-row="false"
              :border="true"
              class="task-list-table"
              header-row-class-name="common-list-table-header taks-list-table-header"
              ref="usersTable"
            >
              <el-table-column prop="seatNo" :label="$t('callcenter.callCenter.label6')"></el-table-column>
              <el-table-column :label="$t('callcenter.callCenter.label7')">
                <template slot-scope="scope">
                  <span v-if="scope.row.statusDescription" :class="statusColor[scope.row.statusDescription]">{{scope.row.statusDescription}}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('callcenter.callCenter.label8')">
                <template slot-scope="scope">
                  <template v-if="isOpenData && scope.row.staffId">
                    <open-data type="userName" :openid="scope.row.staffId"></open-data>
                  </template>
                  <template v-else>
                    <span>{{scope.row.userName}}</span>
                  </template>
                </template>
              </el-table-column>
              <el-table-column prop="seatAccount" :label="$t('callcenter.callCenter.label9')"></el-table-column>
              <el-table-column prop="seatPassword" :label="$t('callcenter.callCenter.label10')"></el-table-column>
              <el-table-column :label="$t('common.base.operation')">
                <template slot-scope="scope">
                  <el-button type="text" v-if="!scope.row.userName" class="color-primary" href="#" @click="bindUser(scope.row)">{{$t('callcenter.callCenter.bind')}}</el-button>
                  <el-button type="text" v-else class="color-business" href="#" @click="unBindUser(scope.row)">{{$t('callcenter.callCenter.unbind')}}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- end 表格 -->
        </template>
        <template v-else-if="current == 2">
          <div class="query-type-manage">
            <div class="header">
              <p>{{$t('callcenter.callCenter.consultClassifyManagement')}}</p>
              <el-button type="primary" @click="edit">{{$t('callcenter.callCenter.createConsultClassify')}}</el-button>
            </div>
          
            <tree-table class="treeTable" :data="categoryList" :columns="columns" :selection-type="false" :expand-type="false" border :show-row-hover="false">
              <template slot="opt" slot-scope="scope">
                <el-button type="text" @click="edit(scope.row,'category')">{{$t('common.base.edit')}}</el-button>
                <el-button type="text" style="color:#FB602C" @click="del(scope.row,scope.$index,'category')">{{$t('common.base.delete')}}</el-button>
              </template>
            </tree-table>

            <!-- <el-table :data="categoryList" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
              <el-table-column prop="name" label="分类名称"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="edit(scope.row,'category')">编辑</el-button>
                  <el-button type="text" @click="del(scope.row,scope.$index,'category')">删除</el-button>
                </template>
              </el-table-column>
            </el-table> -->

          </div>
        </template>
      </div>
    </div>

    <!-- 添加咨询分类的对话框 -->
    <el-dialog :title="title" :visible.sync="categoryDialogVisible" width="30%" @close="categoryDialogClosed">
      <!-- 内容主体区域 -->
      <el-form :model="categoryForm" :rules="categoryFormRules" ref="categoryFormRef" label-position="top">
        <el-form-item :label="$t('callcenter.callCenter.label11')" prop="name">
          <el-input v-model="categoryForm.name"></el-input>
        </el-form-item>

        <el-form-item :label="$t('callcenter.callCenter.label12')">
          <el-cascader style="width:100%;" expand-trigger="hover" :options="pCategoryList" :props="cascaderProps" v-model="selectedKeys" @change="parentCateChanged" clearable>
          </el-cascader>
        </el-form-item>
       
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="categoryDialogVisible = false">{{ $t('common.button.cancel') }}</el-button>
        <el-button type="primary" :loading="pending" @click="addCategory">{{ $t('common.button.makeSure') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { isOpenData } from '@src/util/platform'
import * as CallCenterApi from '@src/api/CallCenterApi'
import { getOssUrl } from '@src/util/assets'
const image1 = getOssUrl('/callcenter.png')
export default {
  name: 'call-center',
  inject:['changeCurrent'],
  props: {
    AccountInfo: {
      type: Object,
      default: () => ({})
    },
  },
  computed: {
    title() {
      return this.categoryId ? this.$t('callcenter.callCenter.editConsultClassify')  : this.$t('callcenter.callCenter.createConsultClassify') 
    }
  },
  data() {
    return {
      image1,
      isOpenData,
      pending:false,
      field: {
        displayName: this.$t('common.base.member'),
        fieldName: 'user',
        formType: 'user'
      },
      selectUsers: [],
      maxNum: 1,
      menuList: [
        // {
        //   name: '客服热线',
        //   icon: 'icon-dianhua'
        // },
        // {
        //   name: '坐席设置',
        //   icon: 'icon-kefu1'
        // },
        {
          name: this.$t('callcenter.workbenchSetting'),
          icon: 'icon-gongzuotai',
          current: 2,
        }
      ],
      userList: [],
      categoryList: [],
      pCategoryList: [],
      columns: [{
        label: this.$t('callcenter.callCenter.label11'),
        prop: 'name'
      },
      {
        label: this.$t('common.base.operation'),
        type: 'template',
        template: 'opt'
      }],
      categoryId:'',
      categoryDialogVisible: false,
      categoryForm: {
        name: '',
        parentId: ''
      },
      categoryFormRules: {
        name: [{ required: true, message: this.$t('callcenter.callCenter.tips1'), trigger: 'blur' },
          { max: 20, message: this.$t('callcenter.callCenter.tips2', {num:20}), trigger: 'blur' }]
      },
      cascaderProps: {
        value: 'id',
        label: 'name',
        children: 'children',
        checkStrictly: true,
      },
      selectedKeys: [],
      statusColor:{
        '在线':'color-online',
        '通话中':'color-business',
        '离线':'color-outline'
      },
      fullscreenLoading:false,
      current:0
    }
  },
  created(){
    let type = window.location.href.split('/')[
      window.location.href.split('/').length - 1
    ];
    // 带锚点的链接
    if(type.indexOf('#') > -1) type = type.split('#')[0]
    this.current = type;
  },
  mounted () {
    this.getAgentList()
    this.getCategoryList()
  },
  methods: {
    // 坐席状态
    fmt_user_state(value) {
      let state = ''
      switch (value) {
      case 0:
        state = '未提交';
        break;
      case 1:
        state = '审核中';
        break;
      case 2:
        state = '审核通过';
        break;
      case -1:
        state = '审核未通过';
        break;
      default:
        break;
      }
      return state
    },
    // 获取坐席列表
    getAgentList(){
      this.fullscreenLoading = true;
      CallCenterApi.getTechList().then(({code, message, result}) => {
        if (code !== 0) return this.$message.error(message || this.$t('callcenter.callCenter.innerError'))
        this.userList = result || []
      }).catch((err) => {
        console.error(err)
      })
        .finally(()=>{
          this.fullscreenLoading = false
        })
    },
    // 获取咨询分类列表
    getCategoryList(){
      CallCenterApi.getZxSortList().then(({code, message, result}) => {
        if (code !== 0) return this.$message.error(message || this.$t('callcenter.callCenter.innerError'))
        this.categoryList = result || []
        // console.info('this.categoryList:', this.categoryList);
      }).catch((err) => {
        console.error(err)
      })
    },
    // 坐席上线下线 20210204舍弃
    async statusChange(row) {
      const ns = row.status ? 0 : 1;
      row.pending = true;
      const params = {
        id: row.id,
        status: ns
      };
      try {
        const { code, message } = await CallCenterApi.updateStatus(params)
        if (code !== 0) return this.$platform.notification({
          title: this.$t('common.base.tip.operationFail'),
          message: message || '',
          type: 'error',
        });
        row.pending = false;
        this.$platform.notification({
          title: this.$t('common.base.tip.operationSuccess'),
          type: 'success',
        }); 
        this.userList.forEach(c => {
          if (c.id === row.id) {
            c.status = ns;
          }
        });
      } catch (error) {
        row.pending = false;
        console.error(error);
      }
    },
    changeTech(type, params = {}){
      if(type == 'lock'){
        return CallCenterApi.lockTech(params)
      }else if(type == 'unlock'){
        return CallCenterApi.unlockTech(params)
      }
    },
    // 切换设置页
    changePage(index) {
      if (this.current == index) {
        return
      }
      this.current = index;
      // this.changeCurrent(index);
      // this.current = index
    },
    // 坐席修改提交
    async submit(item, type) {
      try {
        this.pending = true
        const { code, message } = await CallCenterApi.updateAgent({id:item.id, phone:item.phone})
        this.pending = false
        if (code !== 0) return this.$platform.notification({
          title: this.$t('common.base.submitFail'),
          message: message || '',
          type: 'error',
        });
        this.$platform.notification({
          title: this.$t('common.base.tip.submitSuccess'),
          type: 'success',
        });  
        this.getAgentList();
      } catch (error) {
        this.pending = false
        console.error(error);
      }
    },
    // 咨询分类添加编辑
    edit(item) {
      this.categoryDialogVisible = true
      if(item) {
        // 如果是编辑的时候
        this.pCategoryList = []
        if(!item.children || !item.children.length) {
          for (let e of this.categoryList) {
            if(e.id != item.id) {
              delete e.children 
              this.pCategoryList.push(e)
            } 
          }
        } 
        this.categoryId = item.id
        this.categoryForm.name = item.name 
        if(item.parentId) {
          this.selectedKeys = [item.parentId]
          this.categoryForm.parentId = item.parentId 
        } else {
          this.selectedKeys = []
          this.categoryForm.parentId = 0
        }
      }
    },
    // 选择项发生变化触发这个函数
    parentCateChanged() {
      // console.info('this.selectedKeys:', this.selectedKeys)
      // 如果 selectedKeys 数组中的 length 大于0，证明选中父级分类
      if (this.selectedKeys.length > 0) {
        this.categoryForm.parentId = this.selectedKeys[this.selectedKeys.length - 1]
      } else {
        this.categoryForm.parentId = 0
      }
    },
    // 删除
    async del(item, index, type) {
      try {
        if (!await this.$platform.confirm(`${$t('callcenter.callCenter.confirmDeleteThis')}${ type === 'present' ? $t('callcenter.callCenter.label3') : $t('callcenter.callCenter.label13')}？`)) return;
        this.pending = true
        const url = type === 'present' ? '/api/callcenter/outside/callcenter/api/deleteAgent' : '/api/callcenter/outside/callcenter/api/deleteZxSort'
        const { code, message } = await this.$http.post(url, {id:item.id}, false)
        this.pending = false
        if (code !== 0) return this.$platform.notification({
          title: this.$t('common.base.tip.deleteFail'),
          message: message || '',
          type: 'error',
        });
        if (type === 'present') {
          this.userList.splice(index, 1);
        } else if (type === 'category') {
          this.categoryList.splice(index, 1);  
          this.getCategoryList()
        }  
        this.$platform.notification({
          title: this.$t('common.base.tip.deleteSuccess'),
          type: 'success',
        }); 
      } catch (error) {
        this.pending = false
        console.error(error);
      }
    },
    // 关闭添加分类弹框
    categoryDialogClosed() {
      this.$refs.categoryFormRef.resetFields()
      this.categoryForm.parentId = 0
    },
    // 添加或者编辑咨询分类
    async addCategory() {
      this.$refs.categoryFormRef.validate(async valid => {
        if (!valid) return
        try {
          const params = this.categoryForm;
          if(this.categoryId) {
            params.id = this.categoryId
          } else {
            params.id = ''
          }
          // console.info('params:', params);
          this.pending = true
          const { code, message } = await CallCenterApi.saveZxSort(params)
          this.pending = false
          if (code !== 0) return this.$platform.notification({
            title: this.categoryId ? this.$t('common.base.tip.editFail') : this.$t('common.base.addFailed'),
            message: message || '',
            type: 'error',
          })
          this.$platform.notification({
            title: this.$t('common.base.tip.saveSuccess'),
            type: 'success',
          })
          this.categoryDialogVisible = false
          this.categoryDialogClosed()  
          this.getCategoryList()  
        } catch (error) {
          this.pending = false
          console.error(error)
        }
      })  
    },
    // 添加坐席
    async saveAgent(newValue) {
      try {
        if(!newValue.userId || !newValue.displayName) return
        const {code, message} = await CallCenterApi.saveAgent({userId:newValue.userId, agentName: newValue.displayName})
        if (code !== 0) return this.$platform.notification({
          title: this.$t('common.base.addFailed'),
          message: message || '',
          type: 'error',
        });
        this.$platform.notification({
          title: this.$t('common.base.tip.addSuccess'),
          type: 'success',
        }); 
        this.getAgentList();
      } catch (error) {
        console.error(error);
      }
    },
    /** 
     * @deprecated 已废弃
    */
    bindUser(scope){
      let max = 1;
      let options = {
        title: this.$t('common.placeholder.selectMember'),
        seeAllOrg: true,
        selected: null,
        showDeleteUser: false,
        max
      };
      
      return this.$fast.contact.choose('dept', options).then(result => {
        if(result.status == 0){
          let data = result.data || {};
          let users = data.users || [];
          this.changeTech('lock', {id:scope.id, userId:users[0].userId}).then(res=>{
            if (res.code == 0) {
              scope.userName = users[0].displayName;
              scope.userId = users[0].userId;
              this.$message({
                message: this.$t('common.base.tip.bindingSucceeded'),
                type: 'success',
              });
              this.getAgentList()
            } else {
              this.$notify.error({
                title: this.$t('common.base.tip.httpIsError'),
                message: res.message,
                duration: 2000,
              });
            }
          })

        }
      })
        .catch(err => console.error(err))
    },
    unBindUser(data){
      this.$confirm(this.$t('callcenter.callCenter.confirmUnbind'), this.$t('common.base.toast'), {
        confirmButtonText: this.$t('common.base.makeSure'),
        cancelButtonText: this.$t('common.base.cancel'),
        type: 'warning',
      }).then(()=>{
        this.changeTech('unlock', {id:data.id}).then(res=>{
          if (res.code == 0) {
            data.userName = '';
            this.$message({
              message: this.$t('common.base.tip.unBindSuccess'),
              type: 'success',
            });
            this.getAgentList()
          } else {
            this.$notify.error({
              title: this.$t('common.base.tip.httpIsError'),
              message: res.message,
              duration: 2000,
            });
          }
        })
      })
    }

  },
  watch: {
    selectUsers: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        // console.info('new:', newValue)
        // 添加坐席成员后
        if (newValue) {
          this.saveAgent(newValue)
        }
      }
    }
  },
  
}
</script>
<style lang="scss">
.el-cascader-menus .el-cascader-menu__item{
  padding: 8px 15px;
  display: flex;
  line-height: 21px;
}
.el-cascader-menus .el-cascader-menu__item div{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 120px!important;
}
.call-center-setting {
  padding: 10px;
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  max-width: 100vw;
  .container {
    display: flex;
    align-items: flex-start;
    .left-menu {
      width: 25%;
      min-width: 200px;
      background: #fff;
      box-sizing: border-box;
      border-radius: 3px;
      overflow: hidden;
      position: sticky;
      position: -webkit-sticky;
      top: 10px;
      height: 100vh;
      .menu-title {
        font-size: 18px;
        color: #454648;
        padding: 10px;
        font-weight: 600;
      }
      .menu-list {
        border-left: 3px solid transparent;
        border-top: 1px solid #f4f4f4;
        padding: 10px 15px;
        position: relative;
        display: flex;
        align-items: center;
        cursor: pointer;
        &:hover {
          background: rgb(246, 246, 246);
        }
        span {
          font-size: 12px;
        }
        .left-border {
          height: 100%;
          width: 3px;
          position: absolute;
          left: 0;
          background: #55b7b4;
          top: 0;
        }
        .icon-box {
          width: 22px;
          height: 22px;
          display: flex;
          align-items: center;
          margin-right: 13px;
          i {
            font-size: 16px;
            font-weight: 600;
          }
        }
      }
      .menu-checked {
        border-left: 3px solid #55b7b4;
        @include borderLeftColor();
        &:hover {
          background: #fff;
        }
        span {
          font-size: 13px;
          font-weight: 700;
        }
      }
    }
    .main {
      margin-left: 10px;
      flex: 1;
      min-width: 920px;
      box-sizing: border-box;
      min-height: 100vh;

      .service-line {
        background: #fff;
        p {
          font-size: 20px;
          font-weight: 500;
          padding: 15px;
          margin: 0;
          img {
            width: 36px;
            height: 36px;
            margin-right: 10px;
          }
        }
        .info {
          display: flex;
          border-top: 1px solid rgba(235, 237, 237, 1);
          border-bottom: 1px solid rgba(235, 237, 237, 1);
          .info-item {
            display: flex;
            flex: 1;
            margin: 12px;
            i {
              margin-top: 5px;
              font-size: 24px;
              color: #55B7B4;
            }
            .item-content {
              flex: 1;
              height: 232px;
              border-right: 1px solid rgba(235, 237, 237, 1);
              text-align: left;
              margin-left: 10px;
              .icon-agent-tip{
                color: #b9bfbd;
                margin-left: 10px;
                margin-top: 0;
                font-size: 18px;
              }
              p {
                padding: 0;
                font-size: 16px;
                margin: 10px 0;
              }
              span {
                font-size: 14px;
                display: block;
                margin-bottom: 8px;
              }
              .money {
                color: #fb602c;
              }
            }
          }
        }
      }

      .callcenter-table {
        padding: 10px;

        &:before {
          height: 0;
        }

        .callcenter-table-header th {
          background: #f5f5f5;
          color: $text-color-primary;
          font-weight: normal;
        }

        .view-detail-btn {
          width: 100%;
          @include fontColor();
        }

        .select-column .el-checkbox {
          position: relative;
          top: 3px;
        }
      }

      .operation-bar-container {
        display: flex;
        justify-content: flex-end;
        background: #fff;
        padding: 10px;
      }

      .query-type-manage {
        .header {
          background: #fff;
          padding: 10px;
        }
      }
    }
  }
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-table th > .cell {
  font-size: 14px !important;
  color: #333 !important;
  font-weight: 500 !important;
}

::-webkit-scrollbar-track {
  background: transparent;
}

.form-item label {
  text-align: center;
  padding: 0 15px;
  line-height: 32px;
  display: inline-block;
  background: $color-primary-light-1;
  color: #333;
  outline: none;
  margin-left: 5px;
  &:hover {
    cursor: pointer;
    color: #fff;
    background:  $color-primary-light-5;
  }
}

.form-user input {
  width: 0;
  padding: 0;
  border: none;
}

.advanced-search-btn-group {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  position: absolute;
  bottom: 0px;
  background: #fff;
  padding: 15px 20px;

  .base-button {
    margin: 0 10px;
  }
}
</style>